<template>
    <div class="header" v-if="coursesData.value">
      <img src="../../public/img/goback.png" alt="goback" @click="clickGoBack">
      <h4>{{ coursesData.value.navTitle }}</h4>
    </div>
    <div class="mycourse">
      <div class="mycourse-list" v-if="coursesData.value" v-for="item, index in coursesData.value.list" :key="index">
        <div class="mycourse-item">
          <img :src="`../../public/img/${item.img}`" alt="">
          <div class="expalin" style="text-align: left;">
            <h4 class="title" style="margin: 0;">{{ item.name }}</h4>
            <p class="effctive" style="margin-top: 10px;">有效期：{{ item.time }}</p>
            <div class="start">
              <div class="progress-bar">
                <div class="progress" :style="{ width: item.progress + '%' }"></div>
              </div>
              <span>开始学习</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, reactive } from 'vue';
  import axios from 'axios';
  
  const coursesData = reactive({})
  onMounted(() => {
    axios.get('../../public/data.json').then(response => {
      coursesData.value = response.data["my-course"]
    }).catch(error => {
      console.log('请求失败:', error)
    })
  })
  const clickGoBack=()=>{
    console.log('go back')
  }
  </script>
  
  <style>
  .header {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  
  .header img {
    width: 24px;
    height: 24px;
    margin-right: 102px;
    cursor: pointer;
  }
  
  .header h4 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
  }
  .mycourse-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  
  .mycourse-item {
    display: flex;
    padding: 10px;
    background-color: white;
    margin-bottom: -20px;
    border-bottom: 1px solid #ccc;
  }
  
  .mycourse-item img {
    width: 136px;
    height: 90px;
    margin-right: 10px;
    border-radius: 10px;
  }
  
  .explain {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .explain .title {
    font-size: 16px;
    margin: 0;
    color: #333;
  }
  
  .explain .effctive {
    font-size: 14px;
    color: #888;
  }
  
  .start {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .progress-bar {
    width: 126px;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
  }
  
  .progress {
    height: 100%;
    background-color: #4caf50; 
    transition: width 0.4s ease;
  }
  
  .start span {
    font-size: 12px;
    color: #333;
    cursor: pointer;
  }
  </style>